<template>
    <!-- 岗位分类 -->
    <el-descriptions :column="1" border style="margin: 8px 40px;">
        <el-descriptions-item label-class-name="title-background" label-align="center">
            <template #label>
                <div>
                    <el-icon>
                        <Avatar />
                    </el-icon>
                    行业
                </div>
            </template>
            <el-checkbox-group v-model="industry">
                <el-checkbox value="0">计算机/IT</el-checkbox>
                <el-checkbox value="1">餐饮</el-checkbox>
                <el-checkbox value="2">建筑</el-checkbox>
                <el-checkbox value="3">教育</el-checkbox>
                <el-checkbox value="4">模特</el-checkbox>
            </el-checkbox-group>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="title-background" label-align="center">
            <template #label>
                <div>
                    <el-icon>
                        <HomeFilled />
                    </el-icon>
                    地区
                </div>
            </template>
            <el-checkbox-group v-model="region">
                <el-checkbox value="0">西乡塘区</el-checkbox>
                <el-checkbox value="1">青秀区</el-checkbox>
                <el-checkbox value="2">兴宁区</el-checkbox>
                <el-checkbox value="3">江南区</el-checkbox>
                <el-checkbox value="4">武鸣区</el-checkbox>
            </el-checkbox-group>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="title-background" label-align="center">
            <template #label>
                <div>
                    <el-icon>
                        <WalletFilled />
                    </el-icon>
                    工资
                </div>
            </template>
            <el-checkbox-group v-model="money">
                <el-checkbox value="0">100以下</el-checkbox>
                <el-checkbox value="1">101-200</el-checkbox>
                <el-checkbox value="2">201-400</el-checkbox>
                <el-checkbox value="3">401-1000</el-checkbox>
                <el-checkbox value="4">1000以上</el-checkbox>
            </el-checkbox-group>
        </el-descriptions-item>
    </el-descriptions>
    <!-- 岗位列表 -->
    <div style="margin: 40px 40px;">
        <el-row :gutter="20">
            <el-col :span="8" style="margin-bottom: 20px;"><position-card></position-card></el-col>
            <el-col :span="8" style="margin-bottom: 20px;"><position-card></position-card></el-col>
            <el-col :span="8" style="margin-bottom: 20px;"><position-card></position-card></el-col>
            <el-col :span="8" style="margin-bottom: 20px;"><position-card></position-card></el-col>
            <el-col :span="8" style="margin-bottom: 20px;"><position-card></position-card></el-col>
            <el-col :span="8" style="margin-bottom: 20px;"><position-card></position-card></el-col>
            <el-col :span="8" style="margin-bottom: 20px;"><position-card></position-card></el-col>
        </el-row>
    </div>
    <!-- 更多岗位 -->
    <div style="text-align: center;">
        <el-button type="primary" plain size="large">更多岗位</el-button>
    </div>
</template>

<script setup>
import { Avatar, HomeFilled, WalletFilled } from '@element-plus/icons-vue'
import { ref } from 'vue'
import PositionCard from '@/components/PositionCard.vue'
const industry = ref([])
const region = ref([])
const money = ref([])
</script>

<style scoped>
:deep(.title-background) {
    width: 120px;
}
</style>